<template>
  <div>
    <!-- <van-popup class="course-condition" v-model="city_show_flag" position="left">
        <div class="des">
            <van-icon class="des-icon" name="location"/>
            <span class="des-tip">地区选择</span>
        </div>
        <van-tree-select class="tree_city"
          :items="city"
          :main-active-index="mainActiveIndex"
          :active-id="activeId"
          @navclick="onNavClick"
          @itemclick="onItemClick"
          />
    </van-popup> -->
    <van-popup class="course-condition" v-model="course_show_flag" position="left">
        <div class="des">
          <van-icon class="des-icon" name="records"/>
          <span class="des-tip">选择课程(可多选)</span>
          <label class="count">已选{{count_course}}项</label>
        </div>
        <div class="timestamp">
          <div class="course-button-wrap">
            <van-button v-bind:class="{ button_choose: !count_course>0 }" class="course-button" size="small">全部课程</van-button>
          </div>
          <div class="course-button-wrap" v-for="(tag, index) in course_tag" :key="index">
            <van-button choose="false" @click="changeChooseCourse($event, tag)" class="course-button" size="small">{{tag.name}}</van-button>
          </div>
        </div>
        <div class="footer">
          <van-goods-action>
            <van-goods-action-big-btn text="清空" @click="clearCourse" />
            <van-goods-action-big-btn text="确定" @click="confirmCourse" primary />
          </van-goods-action>
        </div>
    </van-popup>
    <van-popup class="course-condition" v-model="time_show_flag" position="left">
        <div class="des">
          <van-icon class="des-icon" name="clock"/>
          <span class="des-tip">选择时段(可多选)</span>
          <label class="count">已选{{count_time}}项</label>
        </div>
        <div class="timestamp">
          <van-button v-bind:class="{ button_choose: !count_time>0 }" class="time-button" size="small">全部时段</van-button>
          <van-button choose="false" @click="changeChooseTime($event)" class="time-button" size="small" v-for="(tag, index) in time_tag" :key="index">{{tag.name}}</van-button>
          <van-checkbox class="check-hide" v-model="checked">隐藏今天已结束的课程</van-checkbox>
        </div>
        <div class="footer">
          <van-goods-action>
            <van-goods-action-big-btn text="清空" @click="clearTime" />
            <van-goods-action-big-btn text="确定" @click="confirmTime" primary />
          </van-goods-action>
        </div>
    </van-popup>
    <!-- 轮播图 -->
    <swiper :options="swiperOption">
        <swiper-slide v-for="(image, index) in images" :key="index">
          <img @click="goAds(image.url)" class="swiper-image" :src="image.asset_url | qnImg(null, 200)" alt="">
        </swiper-slide>
    </swiper>
    <!-- 时段和课程条件 -->
    <van-row class="course-search-condition" id="condition">
      <van-col class="condition-item" span="12">
        <div class="course-condition-panel" @click="show_city">
          <label>全部教练</label>
          <van-icon class="course-search-icon" name="location"/>
        </div>
      </van-col>
      <!-- <van-col class="condition-item" span="12">
        <div class="course-condition-panel" @click="show_course">
          <label>全部课程</label>
          <van-icon class="course-search-icon" name="shop" />
        </div>
      </van-col> -->
      <van-col class="condition-item" span="12">
        <div class="course-condition-panel" @click="show_time">
          <label>全部时段</label>
          <van-icon class="course-search-icon" name="clock" />
        </div>
      </van-col>
    </van-row>
    <!-- 星期条件 -->
    <!-- <div class="course-search-condition date-condition">
      <div class="course-condition-panel course-date" v-for="(item, index) in dates" :key="index" @click="choose_date(item)">
        <label v-bind:class="{ current_date:  current_date.name === item.name}">{{item.name}}</label>
      </div>
    </div> -->
    <van-tabs v-model="active" class="course-content" @click="changeTab">
      <van-tab class="appoint-tab" title="体验课程">
        <!-- 体验课程 -->
        <van-pull-refresh v-model="isExperienceLoading" @refresh="onRefresh('experience')">
          <van-list  class="course-list" v-model="experienceloading" :finished="experiencefinished" @load="getExperienceCourseData">
            <course-item v-for="(item, index) in courseExperienceList" :key="index" :courseId="item.id"
                :name="item.name" :desc="item.description" :s_time="item.start_time" :e_time="item.end_time" :price="item.price"
                :thumb="(type === 'person') ? item.preview.image : item.coach.preview.image" :type="item.type" :status="item.status" :hasBuy="item.hasBuy"
                :experience="item.experience" :course_period="item.course_period">
            </course-item>
            <label class="shop-course-wait" v-if="experiencefinished && courseExperienceList.length == 0">敬请期待...</label>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab class="appoint-tab" title="私教">
        <!-- 私教列表 -->
        <van-pull-refresh v-model="isPersonLoading" @refresh="onRefresh()">
          <van-list  class="shop-course-list" v-model="gymsloading" :finished="gymsfinished" @load="getGymsData">
            <shop-course v-for="(item, index) in gymsList" :key="index" :shopId="item.id" :latitude="item.latitude" :query="query"
              :longitude="item.longitude" :name="item.name" :type="'person'">
            </shop-course>
            <label class="shop-course-wait" v-if="gymsfinished && gymsList.length == 0">敬请期待...</label>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import shopCourse from '../../components/shop-course.vue'
import courseItem from '../../components/base/course-item.vue'
import jscook from 'js-cookie'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import moment,{ weekdays } from 'moment'

export default {
  name: 'course',
  comments: 'course',
  components: {
    'shop-course': shopCourse,
    'course-item': courseItem,
    swiper,
    swiperSlide
  },
  data () {
    return {
      query: {
        pageNum: 1,
        pageSize: 10,
        tags: 0
        // weekdays: 0,
      },
      current_date: {},
      dates: [],
      experienceloading: false,
      gymsloading: false,
      isPersonLoading: false,
      isExperienceLoading: false,
      active: 0,
      experiencefinished: false,
      gymsfinished: false,
      currentCity: jscook.get('position') ? JSON.parse(jscook.get('position')).city : {},
      city: [
        {
          text: '深圳市',
          children: [
            {
              text: '全市',
              id: 1100
            },
            {
              text: '宝安区',
              id: 1101
            },
            {
              text: '南山区',
              id: 1102
            },
            {
              text: '罗湖区',
              id: 1103
            }
          ]
        },
        {
          text: '上海市',
          children: [
            {
              text: '全市',
              id: 1200
            },
            {
              text: '浦东新区',
              id: 1201
            }
          ]
        }
      ],
      // 左侧高亮元素的index
      mainActiveIndex: 0,
      // 被选中元素的id
      activeId: 1001,
      city_show_flag: false,
      course_show_flag: false,
      time_show_flag: false,
      count_time: 0,
      count_course: 0,
      choose_time: [],
      choose_course: [],
      checked: false,
      course_tag: [],
      time_tag: [],
      images: [],
      gymsList: [],
      courseExperienceList: [],
      fixed: false,
      condition_height: 0,
      swiperOption: {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        effect: 'fade'
      }
    }
  },
  created () {
    document.title = '课程'
    this.getAds('home')
    // this.getGymsData()
    this.getCourseTag()
    this.getCity()
    // this.getTimeTag()
    // this.getWeekdays()
    // window.onscroll = function () {
    //   if(this.fixed && (this.condition_height < document.body.scrollTop)) {
    //     this.fixed = false
    //     console.log(this.fixed)
    //     document.getElementById('condition').style = ''
    //   } else {
    //     document.getElementById('condition').style = 'position:fixed;top:0px;left:0px;width:100%;z-index:9999;'
    //     this.fixed = true
    //     console.log(this.fixed)
    //   }
    // }
  },
  mounted () {
    // this.condition_height = document.getElementById('condition').offsetTop
  },
  computed: {
    choose_week: {
      get: function () {
        return this.current_date.name
      },
      set: function (value) {
      }
    }
  },
  methods: {
    goAds (url) {
      window.document.location.href = url
    },
    onNavClick (index) {
      console.log(index)
      this.mainActiveIndex = index
    },
    onItemClick (data) {
      console.log(data)
      this.activeId = data.id
    },
    changeTab (index, title) {
    },
    show_city () {
      this.city_show_flag = true
    },
    show_course () {
      this.course_show_flag = true
    },
    show_time () {
      this.time_show_flag = true
    },
    chooseCouty (id) {
      this.city_show_flag = false
    },
    changeChooseTime (event) {
      var state = event.target.getAttribute('choose')
      var result = state === 'false'
      event.target.setAttribute('choose', result)
      if (result) {
        event.target.classList.add('button_choose')
        this.choose_time.push(event.target.innerText)
        this.count_time++
      } else {
        event.target.classList.remove('button_choose')
        this.$lodash.remove(this.choose_time, function (n) {
          return n === event.target.innerText
        })
        this.count_time--
      }
    },
    changeChooseCourse (event, tag) {
      console.log(tag.id)
      var state = event.target.getAttribute('choose')
      var result = state === 'false'
      event.target.setAttribute('choose', result)
      if (result) {
        this.query.tags += tag.id
        event.target.classList.add('button_choose')
        this.choose_course.push(event.target.innerText)
        this.count_course++
      } else {
        this.query.tags -= tag.id
        event.target.classList.remove('button_choose')
        this.$lodash.remove(this.choose_course, function (n) {
          return n === event.target.innerText
        })
        this.count_course--
      }
    },
    clearCourse () {
      this.choose_course = []
    },
    confirmCourse () {
      this.gymsList = []
      this.getGymsData()
      this.course_show_flag = false
    },
    clearTime () {
      this.time = ''
    },
    confirmTime () {
      this.pageNum = 0
      this.pageSize = 10
      var query = {
        page_num: this.pageNum,
        page_size: this.pageSize,
        choose_time: this.choose_time.join(','),
        end: this.checked
      }
      this.query = Object.assign(this.query, query)
      this.gymsList = []
      this.getGymsData()
      this.time_show_flag = false
    },
    // 获取省
    getProvince (provinceId) {
      var that = this
      this.$axios.get('/provinces' + (provinceId ? '/' + provinceId : '')).then(response => {
        that.province = response.data
      })
    },
    // 获取市
    getCity (provinceId) {
      var that = this
      this.$axios.get('/provinces/' + provinceId + '/cities').then(response => {
        for (var i = 0; i < response.data.length; i++) {
          that.city.push(response.data[i].name)
        }
      })
    },
    // 获取区
    getAreas (cityId) {
      var that = this
      this.$axios.get('/city/' + cityId + '/areas').then(response => {
        that.areas = response.data
      })
    },
    // 获取广告
    getAds (tag) {
      var that = this
      this.$axios.get('/banners', {
        params: {
          locate: tag
        }
      }).then(response => {
        that.images = response.data
      })
    },
    // 获取健身房
    getGymsData () {
      this.gymsloading = true
      var that = this
      this.$axios.get('/gyms?type=person').then(response => {
        if (response.data && (response.data.length === that.pageSize)) {
          that.pageNum++
        } else {
          that.gymsfinished = true
        }
        that.gymsList = that.gymsList.concat(response.data)
        that.gymsloading = false
      }).catch(error => {
        that.gymsfinished = true
        that.gymsloading = false
        console.log(error)
      })
    },
    getExperienceCourseData () {
      this.experienceloading = true
      var that = this
      this.$axios.get('/courses', {
        params: Object.assign({
          gyms: this.shopId,
          user_id: JSON.parse(localStorage.user).id
        }, that.query)
      }).then(response => {
        if (response.data && (response.data.length === that.pageSize)) {
          that.pageNum++
        } else {
          that.experiencefinished = true
        }
        that.courseExperienceList = that.courseExperienceList.concat(response.data)
        that.experienceloading = false
      }).catch(error => {
        that.experiencefinished = true
        that.experienceloading = false
        console.log(error)
      })
    },
    // 获取课程标签
    getCourseTag () {
      this.$axios.get('/attributes/course_tags').then(response => {
        this.course_tag = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取课程时段
    getTimeTag () {
      this.$axios.get('/attributes/time_scopes').then(response => {
        this.time_tag = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="postcss" scoped>
img {
    width: 100%;
}
.swiper-image{
  height: 130px;
}
.tree_city,.van-tree-select__content{
    font-size: 12px;
    color: white;
    width: 100%;
    min-height: 96%;
}
.van-button--default {
    color: #fff;
    background-color: #333;
}
.van-tree-select__content{
  background-color: #4a4242;
}
.course-condition{
    width: 80%;
    height: 100%;
    position: fixed;
    left: 0px;
    background-color: #3c3a3a;
}
.course-date:first-child{
  width: 15%;
}
.course-date:last-child{
  width: 15%;
}
.course-date{
  width: 14%;
  float: left;
}
.current_date{
  background-color: yellow;
  color: #333;
  border-radius: 50%;
  width: 1.4rem;
}
.timestamp{
  overflow-y: scroll;
  height: 85%;
}
.course-search-condition div:first-child{
    border-left: none;
}
.course-search-condition {
    padding: 3px;
    font-size: 1rem;
    background-color: #333;
    color: #f8f8f8;
    position: relative;
    height: 1.4rem;
    line-height: 1.4rem;
}
.date-condition{
  margin-top: 1px;
}
.condition-item{
    border-left: 1px solid #fff;
    width: 50%;
}
.course-condition-panel{
    height: 1.4rem;
    display: flex;
    justify-content: center;
}
.course-condition-panel>span{
  align-self: center;
}
.course-search-icon{
    align-self: center;
    margin-left: 3px;
}
.des{
    height: 4%;
    font-size: 14px;
    text-align: left;
    color: white;
    padding: 5px 10px;
    background-color: #333;;
    position: relative;
}
.des-icon{
  position: absolute;
  top: 9px;
}
.des-tip{
  position: relative;
  left: 16px;
}
.count {
    float: right;
}
.time-button{
  margin: 24px auto;
  display: block;
  min-width: 140px;
}
.course-button-wrap{
  width: 33.33%;
  float: left;
}
.course-button{
  margin-top: 16px;
}
.button_choose {
    color: #333;
    background-color: #d0d032;
    border: none;
}
.course-content{
  margin-top: 1px;
}
.check-hide{
  color: white;
  font-size: 12px;
  margin: 10px auto;
}
.course-list,.shop-course-list{
  min-height: 100px;
}
.shop-course-list div:first-child{
  margin-top: 4px;
}
.shop-course-wait{
  color: #f8f8f8;
  text-decoration: underline;
  margin-top: 10px;
  display: block;
}
</style>
